<template xmlns="">
  <div class="layerTreeScene">
    <layerTree
      ref="layerTree"
      :layers="sceneTree"
      :is-layer="isLayer"
      :is-query="isQuery"
      :is-echart="isEchart"
      :is-legend="isLegend"
      :is-slider="isSlider"
      :checked-ids="checkedIds"
      @onNodeChecked="onNodeChecked"
      @onChange="onChange"
      @onLegendShow="onLegend"
      @onEchart="onEchart"
      @onQuery="onQuery"
      @onLocateTo="onLocateTo"
    />
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import { SceneUtil } from "@/assets/js/scene/SceneUtil.js";
import { StringUtil } from "@/assets/js/utils/StringUtil.js";
import LayerTree from "@/components/layerTree";
import Vue from "vue";
export default {
  data() {
    return {
      filterText: "", // 过滤
      defaultProps: {
        children: "scenes",
        label: "name"
      },
      activeName: "",
      imageryLayers: [],
      dataIndex: 0
    };
  },

  watch: {
    filterText(val) {
      this.$refs.treeScene.filter(val);
    }
  },

  mounted() {
    this.bus.$on("onScenesInitComplete", () => {
     // this.loadDefaultCheckedLayers();
    });
  },

  methods: {
    // 图层定位
    onLocateTo(data) {
      // this.mapServiceRight.setMapBoundsByLayerBounds(data)
    },
    // 查询事件
    onQuery(data) {
      // this.$store.commit('eswyzt/setCurrentSearchLayer', data)
      // this.$store.commit('eswyzt/setIsShowAttribute', true)
    },
    // 统计事件
    onEchart(data) {},
    // 图例事件
    onLegend(data) {
      // this.$store.commit('eswyzt/setCurrentSearchLayer', data)
      // this.$store.commit('eswyzt/setShowLayerLegend', true)
    },
    // 图例
    isLegend(node, data) {
      return data.legendurl;
    },
    // 透明的
    isSlider(node, data) {
      return data.attribute === "" && data.isVisible;
    },
    // Echart图标
    isEchart(node, data) {
      return false && data.isVisible;
    },
    // 查询
    isQuery(node, data) {
      return data.attribute !== "" && data.isVisible;
    },
    // 图层
    isLayer(node, data) {
      return !data.pid;
    },

    // 透明事件
    onChange($event, data) {
      // this.mapServiceLeft.setOpacityValue(1 - $event / 100, data)
      // this.mapServiceRight.setOpacityValue(1 - $event / 100, data)
    },

    // 图层选中
    onNodeChecked(node, data) {
      this.lookForLayers([data], node);
    },

    // 查找图层
    async lookForLayers(layers, node) {
      for (let i = 0; i < layers.length; i++) {
        var item = layers[i];
        // 目录
        if (item.children && item.children.length > 0) {
          await this.lookForLayers(item.children, node);
        } else {
          // 图层
          this.openOrCloseLayer(item, node);
        }
      }
    },

    // 打开图层
    openOrCloseLayer(layer, node) {
      var visible = node.checkedKeys ? node.checkedKeys.indexOf(layer._id) != -1  : true;
      this.$set(layer, "isVisible", visible);
      let sceneParam = SceneUtil.parseLayerUrlParam(scene.url);
      let sceneUrl = SceneUtil.parseLayerUrl(scene.url);
      if (sceneParam && sceneUrl) {
        if (isVisible) {
          this.addSceneLayer(
            scene._id,
            sceneUrl,
            sceneParam.name,
            sceneParam.sceneType,
            parseInt(scene.layerIndex)
          );
        } else {
          this.removeSceneLayer(scene._id, sceneParam.sceneType);
        }
      }
    },
    // 地图切换
    onLayerChanged(id) {
      this.$refs["layerTree"].setCheckedLayerById(id);
    },
    //模块数据切换
    tabSwitch(val) {
      this.dataIndex = parseInt(val.index);
      let checkIds = ["5cd4ef360f39383ae8d28d5c", "5cd4efee0f39383ae8d28d5d"];
      const ids = this.allScenes.filter(l => l.sisVisible).map(l => l._id); //.concat(checkIds);
      this.$refs.treeScene.setCheckedKeys(ids);
    },

    /**
     * 控制图层开闭
     * @param data
     * @param Node
     */
    nodeCheck(data, Node) {
      if (data.scenes) {
        data.scenes.forEach(scene => {
          //解析Url中配置的参数
          const isVisible = Node.checkedKeys.indexOf(scene._id) > -1;
          let sceneParam = SceneUtil.parseLayerUrlParam(scene.url);
          let sceneUrl = SceneUtil.parseLayerUrl(scene.url);
          if (sceneParam && sceneUrl) {
            if (isVisible) {
              this.addSceneLayer(
                scene._id,
                sceneUrl,
                sceneParam.name,
                sceneParam.sceneType,
                parseInt(scene.layerIndex)
              );
            } else {
              this.removeSceneLayer(scene._id, sceneParam.sceneType);
            }
          }
          Vue.set(scene, "sisVisible", isVisible);
          // scene.sisVisible = isVisible;
        });
      } else {
        const isVisible = Node.checkedKeys.indexOf(data._id) > -1;
        let sceneParam = SceneUtil.parseLayerUrlParam(data.url);
        let sceneUrl = SceneUtil.parseLayerUrl(data.url);
        if (sceneParam && sceneUrl) {
          if (isVisible) {
            this.addSceneLayer(
              data._id,
              sceneUrl,
              sceneParam.name,
              sceneParam.sceneType,
              parseInt(data.layerIndex)
            );
          } else {
            this.removeSceneLayer(data._id, sceneParam.sceneType);
          }
        }
        Vue.set(data, "sisVisible", isVisible);
      }
    },

    // 添加三维图层
    addSceneLayer(_id, sceneUrl, name, sceneType) {
      let imageryLayer = SceneUtil.sceneLayerAdd(
        this.$store.state.eswyzt.sceneViewer,
        sceneUrl,
        name,
        sceneType,
        0
      );
      //记录添加图层
      let imageryLayerJson = {};
      StringUtil.CreateJson("id", _id, imageryLayerJson);
      StringUtil.CreateJson("imageryLayer", imageryLayer, imageryLayerJson);
      this.imageryLayers.push(imageryLayerJson);
    },

    // 删除三维图层
    removeSceneLayer(_id, sceneType) {
      // let sceneLayerIsAddIndex = this.imageryLayers.findIndex(
      //   sceneLayerIsAdd => sceneLayerIsAdd.id === _id
      // );
      // let imagryLayer = this.imageryLayers.splice(sceneLayerIsAddIndex, 1);
      // SceneUtil.sceneLayerRemove(
      //   this.$store.state.eswyzt.sceneViewer,
      //   imagryLayer[0].imageryLayer,
      //   sceneType
      // );

      // let sceneLayerIsAddIndex = this.imageryLayers.findIndex(sceneLayerIsAdd => sceneLayerIsAdd.id === _id);
      // console.log(this.imageryLayers);
      // console.log(_id);
      // console.log(sceneLayerIsAddIndex);
      // let imagryLayer = this.imageryLayers.splice(sceneLayerIsAddIndex,1);
      // SceneUtil.sceneLayerRemove(this.$store.state.eswyzt.sceneViewer,imagryLayer[0].imageryLayer,sceneType);

      let sceneLayerIsAddIndex = this.imageryLayers.findIndex(
        sceneLayerIsAdd => sceneLayerIsAdd.id === _id
      );
      if (sceneLayerIsAddIndex > -1) {
        let imagryLayer = this.imageryLayers.splice(sceneLayerIsAddIndex, 1);
        SceneUtil.sceneLayerRemove(
          this.$store.state.eswyzt.sceneViewer,
          imagryLayer[0].imageryLayer,
          sceneType
        );
      } else {
        sceneLayerIsAddIndex = this.$store.state.eswyzt.imageryLayers.findIndex(
          sceneLayerIsAdd => sceneLayerIsAdd.id === _id
        );
        let storeImageryLayers = this.$store.state.eswyzt.imageryLayers;
        let imagryLayer = storeImageryLayers.splice(sceneLayerIsAddIndex, 1);
        SceneUtil.sceneLayerRemove(
          this.$store.state.eswyzt.sceneViewer,
          imagryLayer[0].imageryLayer,
          sceneType
        );
        this.$store.commit("eswyzt/setImageryLayers", storeImageryLayers);
      }
    },

    /**
     * 设置透明度
     * @param $event
     * @param data
     */
    change($event, data) {
      data.alpha = $event;
      this.$store.state.eswyzt.mapService.setOpacityValue(
        1 - $event / 100,
        data
      );
    },
    /**
     * 属性查询
     */
    attributesQuery($event, layer) {
      this.$store.commit("eswyzt/setCurrentSearchLayer", layer);
      this.$store.commit("eswyzt/setAttributeTable", true);
    },
    /**
     * 图层定位
     */
    layerLocateTo($event, data) {
      let sceneParam = SceneUtil.parseLayerUrlParam(data.url);
      let sceneUrl = SceneUtil.parseLayerUrl(data.url);

      if (this.imageryLayers.length > 0) {
        this.imageryLayers.forEach(imageryLayer => {
          if (imageryLayer.id === data._id) {
            SceneUtil.sceneLayerPosition(
              this.$store.state.eswyzt.sceneViewer,
              imageryLayer.imageryLayer,
              sceneParam.sceneType
            );
          }
        });
      }
    },
    /**
     * 显示图例
     */
    showLegend($event, layer) {
      this.$store.commit("eswyzt/setCurrentSearchLayer", layer);
      this.$store.commit("eswyzt/setShowLayerLegend", true);
    },
    /**
     * 图层统计
     */
    staticsQuery($event, layer) {
      this.$store.commit("eswyzt/setShowLayerStatics", true);
      this.$store.commit("eswyzt/setCurrentSearchLayer", layer);
    },
    //价值默认图层
    loadDefaultCheckedLayers() {
      //let checkIds = ['5cd4ef360f39383ae8d28d5c','5cd4efee0f39383ae8d28d5d'];
      const checkIds = this.allScenes.filter(l => l.schecked).map(l => l._id);

      this.$refs.treeScene.setCheckedKeys(checkIds);
      this.$nextTick().then(() => {
        checkIds.forEach(checkId => {
          let checkedKeys = this.$refs.treeScene.getCheckedKeys(true);
          let checkedNodes = this.$refs.treeScene.getCheckedNodes(false, true);
          let halfCheckedKeys = this.$refs.treeScene.getHalfCheckedKeys();
          let halfCheckedNodes = this.$refs.treeScene.getHalfCheckedNodes();

          let Node = {
            checkedKeys: checkedKeys,
            checkedNodes: checkedNodes,
            halfCheckedKeys: halfCheckedKeys,
            halfCheckedNodes: halfCheckedNodes
          };
          let nodeData = this.$refs.treeScene.getNode(checkId);
          this.nodeCheck(nodeData["data"], Node);
        });
        this.$store.commit("eswyzt/setImageryLayers", this.imageryLayers);
      });
    }
  },

  computed: {
    ...mapGetters("user", ["allScenes", "sceneTree"])
  },
  components: { LayerTree },

  beforeDestroy() {}
};
</script>

<style>
/**
   * 图层树checkbox的外边框颜色
   */
.layerTreeScene .el-checkbox__inner {
  border-color: #fff;
}

/**
   * 图层树过滤输入的外边框颜色
   */
.layerTreeScene .el-input__inner:focus {
  border-color: #398f8699;
}

/**
   * 图层树Checkbox背景颜色
   */
.layerTreeScene .el-checkbox__inner {
  background-color: #ffffff00;
}

/**
   * 图层树Checkbox选中颜色和边框颜色
   */
.layerTreeScene .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #398f86ff;
  border-color: #fff0;
}

/**
   * 图层树Checkbox未选中颜色和边框颜色
   */
.layerTreeScene .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #fff;
}

.layerTreeScene .el-tree-node__children .el-tree-node__content {
  height: auto;
  padding: 4px;
}

.layerTreeScene .el-main {
  padding: 0px;
}

.layerTreeScene .el-input__inner {
  height: 30px;
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
  border-radius: 0px;
}

.layerTreeScene .el-tree-node__content {
  display: block;
}

.layerTreeScene .el-slider__runway {
  width: 80%;
  margin: 5px 20px;
  margin-left: 52px;
  height: 3px;
}

.layerTreeScene .el-button.is-circle {
  padding: 2px;
}

/**
   * 进度条背景颜色
   */
.layerTreeScene .el-slider__bar {
  height: 3px;
  background-color: #398f86ff;
}

/**
   * 进度条按钮背景颜色
   */
.layerTreeScene .el-slider__button {
  width: 10px;
  height: 10px;
  border-color: #398f86ff;
}

.layerTreeScene .el-slider__button-wrapper {
  top: -13px;
  height: 30px;
  width: 30px;
}

.layerTreeScene .el-button {
  font-size: 5px;
}

.layerTreeScene .treeGroupIcon {
  font-size: 16px;
}

.layerTreeScene .treeItemIcon {
  font-size: 15px;
}

.layerTreeScene .treeGroup {
  font-size: 16px;
  color: #fff;
  font-family: "Microsoft YaHei";
}

.layerTreeScene .treeItem {
  font-size: 15px;
  color: #fff;
  font-family: "Microsoft YaHei";
}

/**
  * 图层树背景透明
  */
.layerTreeScene .el-tree {
  background: rgba(0, 0, 0, 0);
}

/* 设置节点hover时的样式 */
.layerTreeScene .el-tree-node > .el-tree-node__content:hover {
  background-color: #00000043;
}

/* 设置节点选中的样式 */
.layerTreeScene .el-tree-node:focus > .el-tree-node__content {
  background-color: #00000043;
}
</style>

